<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
    <!--ztree-->
    <link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>

    <title>API监控</title>
    <style type="text/css">
        /*标题*/
        .part-title{
            font-weight: 700;line-height: 20px;border-bottom: #76838F solid 2px;margin-bottom: 8px;clear: both;font-size: 16px;
        }
    </style>
</head>
<body class="skin-default">
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <!--视图块-->
            <div class="container-fluid card">

                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <!--检索栏-->
                        <form class="form-inline search-bar" id="pageForm">
                            <!--<div class="form-group">
                                <label class="control-label">业务编号：&nbsp;</label>
                                <input type="text" name="businessId" class="form-control">
                            </div>-->
                            <div class="form-group">
                                <label class="control-label"><input type="radio" value="1@10" name="howTime" checked="checked">最近10分钟</label>
                                &nbsp;&nbsp;<label class="control-label"><input type="radio" value="1@30" name="howTime">最近30分钟</label>
                                &nbsp;&nbsp;<label class="control-label"><input type="radio" value="1@60" name="howTime">最近一小时</label>
                                &nbsp;&nbsp;<label class="control-label"><input type="radio" value="2@4" name="howTime">最近4小时</label>
                                &nbsp;&nbsp;<label class="control-label"><input type="radio" value="2@8" name="howTime">最近8小时</label>
                                &nbsp;&nbsp;<label class="control-label"><input type="radio" value="2@12" name="howTime">最近12小时</label>
                                &nbsp;&nbsp;<label class="control-label"><input type="radio" value="2@16" name="howTime">最近16小时</label>
                                &nbsp;&nbsp;<label class="control-label"><input type="radio" value="2@24" name="howTime">最近24小时</label>
                            </div>
                            <button type="button" class="btn btn-primary" onclick="loadApiChart()"> <i class="fa fa-search" aria-hidden="true"></i>&nbsp;查询</button>
                        </form>
                        <!--/检索栏-->
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="part-title">性能监控:</div>
                        <div id="performanceChart" style="height: 400px;"></div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="part-title">可用率:</div>
                        <div id="availabilityChart" style="height: 400px;"></div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="part-title">调用次数:</div>
                        <div id="callChart" style="height: 400px;"></div>
                    </div>
                </div>
                
            </div>

        </div>
    </div>
</div>



<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<!--统计图-->
<script src="/static/plugin/echarts/echarts.js"></script>
<script type="text/javascript">
    //应用
    var app = jo.getDefVal(jo.getUrlParam('app'), '');
    //监控key
    var key = jo.getDefVal(jo.getUrlParam('key'), '');
    $(function(){
        loadApiChart();
    });
    //加载
    function loadApiChart(){
        for(var k in chartTool){
            chartTool[k].clear();
        }
        //$('#performanceChart').html('111');
        var val = jo.getCheckBoxValue('howTime').split('@');
        jo.postAjax('{URL_MONITOR}monitor/stat/getStat', {app: app, key: key, timeRange: val[1], dimension: val[0]}, function(json){
            if(json && json.code == 0 && json.data && json.data.length > 0){
                dataToChart(json);
            }else{
                jo.showCryMsg('暂无监控数据');
            }
        }, true);
    }
    //数据转图表
    function dataToChart(json){
        var times = [];//时间线, 横坐标
        var showObj = [];//性能图
        var legendData = ['TP50', 'TP90', 'TP99', 'TP999', 'MIN', 'MAX', 'AVG'];//图例
        var cols = ['tp50', 'tp90', 'tp99', 'tp999', 'minMs', 'maxMs', 'avgMs'];//图例对于字段名

        var availability = [];//可用率图

        var counts = [];//调用量
        for(var i=0;i<legendData.length;i++){
            var item = legendData[i];
            showObj.push({
                name: item,
                type: 'line',
                data:[]
            });
        }
        //组织数据
        for(var i=0;i<json.data.length;i++){
            var item = json.data[i];
            var min = item['timeMinute'];
            for(var j=0;j<cols.length;j++){
                showObj[j].data.push(item[cols[j]]);//放入对应指标数据
            }
            times.push(formatMinute(min));//记录时间

            availability.push(item['availability']);//可用率

            counts.push(item['callNum']);//调用量
        }

        //性能图
        draw('performanceChart', times, showObj, legendData);
        //可用率图
        draw('availabilityChart', times, [{
            name: '可用率',
            type: 'line',
            data: availability
        }]);
        //调用量图
        draw('callChart', times, [{
            name: '调用量',
            type: 'line',
            data: counts
        }]);
    }

    //图容器
    var chartTool = {};

    //画图
    function draw(eid, times, showObj, legendData){
        var option = {
            title: {
                text: '【' + app + '】' + key
                ,show: false
                ,padding: 0
            },
            tooltip : {
                trigger: 'axis'
            }/*,
            legend: {
                data: legendData
                ,padding: 10
                ,bottom: 5
            }*/,
            color: ['#37A2DA', '#96BFFF', '#3E8EF7', '#FF9F7F', '#FB7293', '#FF4C52', '#9D96F5'],
            toolbox: {

            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '50',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : times
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : showObj
        };
        //有图例就显示图例
        if(legendData){
            option.legend = {
                data: legendData
                ,padding: 10
                ,bottom: 5
            };
        }

        if(chartTool[eid]){//已经初始化过
            chartTool[eid].setOption(option, true);
        }else{
            var myChart = echarts.init(document.getElementById(eid));
            myChart.setOption(option);
            chartTool[eid] = myChart;
        }
        return chartTool[eid];
    }

    function formatMinute(minute){
        var m = minute + '';
        var s = '';
        for(var i=0;i<m.length;i++){
            if(i<4){
                continue;
            }
            s += m[i];
            if(i == 3){
                s += '-';
            }else if(i == 5){
                s += '-';
            }else if(i == 7){
                s += ' ';
            }else if(i == 9){
                s += ':';
            }
        }
        return s;
    }
</script>

</body>
</html>
